<template>
  <div id="app">
    <!-- <Father></Father> -->
    <!-- <ComputedWatch></ComputedWatch> -->
    <!-- <Directives></Directives> -->
    <!-- <Filters></Filters> -->
    <!-- <Mixin></Mixin> -->
    <!-- <Modifier></Modifier> -->
    <!-- <InputElement></InputElement> -->
    <!-- <Builtin-Components></Builtin-Components> -->
    <VuexComponent></VuexComponent>
    <!-- <RenderingFunction></RenderingFunction> -->

    <!-- <Slot-Component @clickPuTong="onItem1">
      <div class="defaultSlot">hello我是默认插槽，插槽中可以传元素，还可以传组件 <Son></Son> </div>

      <template v-slot:first><div>第一个具名插槽</div></template>
      <template v-slot:second><div>第二个具名插槽</div></template>
      <template v-slot:[dynamicSlotName]><div>动态插槽</div></template>
      <template v-slot:item="slotProps"><div>第{{ slotProps.item}}个具名插槽</div></template>

      接收过来的数据可以解构 并且也可以重命名子组件传过来的值的语法    v-slot的缩写：#
      <template #module="{user, parson: parsonAlias}"><div>作用域插槽的内容：{{ user.name }}---{{ parsonAlias.name }}</div></template>
    </Slot-Component> -->
    
    <!-- <SlotComponent @clickPuTong="onItem2">
      <span>world</span>
      <template v-slot:first><div>第一个具名插槽</div></template>
      <template v-slot:three><div>第三个具名插槽</div></template>
      <template v-slot:parsonModule="slotProps"><div>{{ slotProps.parson.age }}</div></template>  这行注释
      <template v-slot:module="slotProps"><div>{{ slotProps.parson.name }}</div></template>
    </SlotComponent> -->

<!-- ========================================================================================================================= -->
    <div class="demands">
      <!-- <LargeFileUpload></LargeFileUpload> -->
      <!-- <FileObject></FileObject> -->
      <!-- <FileUpload></FileUpload> -->

      <!-- <PictureLazyLoad></PictureLazyLoad> -->
      <!-- <CommandComponent></CommandComponent> -->
      <!-- <Worker></Worker> -->
    </div>
<!-- ========================================================================================================================= -->

    <div class="echarts">
      <!-- <PieChart>饼图</PieChart>  -->
      <!-- <BarChart>柱状图</BarChart> -->
      <!-- <LineChart>折线图</LineChart> -->
      <!-- <ScatterChart>散点图</ScatterChart> -->
      <!-- <CandlestickChart>K线图</CandlestickChart> -->
      <!-- <RadarChart>雷达图</RadarChart> -->
    </div>
<!-- ========================================================================================================================= -->

    <div class="elementUI">
      <!-- <BasicUI></BasicUI> -->
      <!-- <FormUI></FormUI> -->
    </div>
<!-- ========================================================================================================================= -->
    <div class="plugins">
        <!-- <WangEditor></WangEditor> -->
        <!-- <VueQr></VueQr> -->
        <!-- <Swiper></Swiper> -->
        <!-- <MyPlugins></MyPlugins> -->
    </div>
<!-- ========================================================================================================================= -->
<!-- <mianshi></mianshi> -->

    <router-view class="view"/>
    <!-- <router-view class="view" name="home"/> -->
  </div>
</template>
<script>

// 这样引入组件，在webpage 构建打包的时候会打包进 app.js 中，造成我们首屏加载时没用到以下组件照样加载
// vue相关的组件
  // let Father = ()=>import("./views/Father.vue")      异步引入组件
  import Father from "./views/Father.vue"
  import Son from "./views/Son.vue";
  import ComputedWatch from './views/ComputedWatch.vue';
  import Directives from "./views/Directives.vue"
  import Filters from './views/Filters.vue';
  import Mixin from './views/Mixin.vue';
  import Modifier from './views/Modifier.vue';
  import InputElement from './views/InputElement.vue'
  import SlotComponent from './views/Slot.vue';
  import BuiltinComponents from "./views/BuiltinComponents.vue"
  import VuexComponent from "./views/Vuex.vue";
  import RenderingFunction from "./views/RenderingFunction.vue";
// 业务需求相关
  import FileObject from "./views/demands/file/FileObject.vue";
  import FileUpload from "./views/demands/file/FileUpload.vue";
  import LargeFileUpload from "./views/demands/file/LargeFileUpload.vue";

  import PictureLazyLoad from "./views/demands/PictureLazyLoad.vue";
  import CommandComponent from "./views/demands/commandComponent/CommandComponent.vue";
  import Worker from "./views/demands/Worker.vue";
// echarts相关
  import PieChart from "./views/echarts/PieChart.vue";
  import BarChart from "./views/echarts/BarChart.vue";
  import LineChart from "./views/echarts/LineChart.vue";
  import ScatterChart from "./views/echarts/ScatterChart.vue";
  import CandlestickChart from "./views/echarts/CandlestickChart.vue";
  import RadarChart from "./views/echarts/RadarChart.vue";
// elementUI相关
  import BasicUI from './views/elementUI/BasicUI.vue';
  import FormUI from './views/elementUI/FormUI.vue';
// 各种插件相关
  import MyPlugins from './views/plugin-pages/MyPlugins.vue';
  import WangEditor from './views/plugin-pages/WangEditor.vue';
  import VueQr from './views/plugin-pages/VueQr.vue';
  import Swiper from './views/plugin-pages/Swiper.vue';



  import mianshi from "./views/mianshi.vue";

  export default {
    components:{
// vue相关的组件
      Father, Son, ComputedWatch, Directives,Filters,Mixin,Modifier,
      InputElement,SlotComponent,BuiltinComponents,VuexComponent,RenderingFunction,
// echarts相关
      PieChart,BarChart,LineChart,ScatterChart,CandlestickChart,RadarChart,
// elementUI相关
      BasicUI,FormUI,
// 各种插件相关
      MyPlugins,WangEditor,VueQr,Swiper,
// 业务需求相关
      FileObject,FileUpload,LargeFileUpload,
      PictureLazyLoad, CommandComponent,Worker,


      mianshi,
    },
    data(){
      return{
        dynamicSlotName: "dynamicSlot"
      }
    },
    methods: {
      onItem1(){
        alert("第11111111")
      },
      onItem2(){
        alert("第22222222")
      }
    },
    created(){

    },
  }
</script>

<style>
#app{
  text-align: center;
}
.defaultSlot{
  background-color: pink;
}

#app{
  margin-top: 0;
  padding: 0;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
.view{
  background-color: #ccc;
}
.echarts{
  display: flex;
  flex-wrap: wrap;
}
</style>






<!-- components:{
  'Father': () => import('./views/Father.vue'),
  'ComputedWatch': () => import('./views/ComputedWatch.vue'),
  'Directives': () => import('./views/Directives.vue'),
  'Filters': () => import('./views/Filters.vue'),
  'Mixin': () => import('./views/Mixin.vue'),
  'Modifier': () => import('./views/Modifier.vue'),
  'InputElement': () => import('./views/InputElement.vue'),
  'SlotComponent': () => import('./views/Slot.vue'),
  'BuiltinComponents': () => import('./views/BuiltinComponents.vue'),

  'PieChart': () => import('./views/echarts/PieChart.vue'),
  'BarChart': () => import('./views/echarts/BarChart.vue'),
  'LineChart': () => import('./views/echarts/LineChart.vue'),
  'ScatterChart': () => import('./views/echarts/ScatterChart.vue'),
  'CandlestickChart': () => import('./views/echarts/CandlestickChart.vue'),
  'RadarChart': () => import('./views/echarts/RadarChart.vue'),

  'BasicUI': () => import('./views/elementUI/BasicUI.vue'),
  'FormUI': () => import('./views/elementUI/FormUI.vue'),

  'MyPlugins': () => import('./views/plugin-pages/MyPlugins.vue'),
  'WangEditor': () => import('./views/plugin-pages/WangEditor.vue'),
  'VueQr': () => import('./views/plugin-pages/VueQr.vue'),
  'Swiper': () => import('./views/plugin-pages/Swiper.vue'),
  
  // ComputedWatch, Father, Directives,Filters,Mixin,Modifier,InputElement,SlotComponent,BuiltinComponents,
  // PieChart,BarChart,LineChart,ScatterChart,CandlestickChart,RadarChart,
  // BasicUI,FormUI,
  // MyPlugins,WangEditor,VueQr,Swiper
}, -->


<!-- const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
}) -->
